<template>
<div class="welcome">
    <ul class="top">
        <li class="li" v-for="(item,index) in cards" :key="index">
            <div class="le">
                <div class="le_top">Today’s Sale</div>
                <div class="le_bot">
                    <div class="le_t_l">$53,000</div>
                    <div class="le_t_r">+30%</div>
                </div>
            </div>
            <div class="ri">
                <div class="bgc">
                    <img :src="item.icon" alt="" style="width: 28px">
                </div>
            </div>
        </li>
    </ul>
    <div class="bottom">
        <div class="le">
            <div class="download">
                <h3>文档下载</h3>
                <div>
                    <p @click="downDoc('jksm.docx')">接口文档下载</p>
                    <p @click="downDoc('Demo.zip')">接口Java版本demo下载</p>
                </div>
            </div>
            <div class="notice">
                <h3>公告</h3>
                <div>
                    <div v-for="item in noticeData" :key="item.id" @click="showNotice(item)" :class="{'badge':item.new}">
                        <div class="p"> {{ item.title }}</div>
                        <div class="p"> {{ item.time }}</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="bot_chart">
            <div class="echarts" ref="chart" id="chartDom"></div>
        </div>

    </div>
</div>
</template>

<script>
// import echarts from 'echarts'
import * as echarts from 'echarts';
import dayjs from 'dayjs'
import bus from '@/common/util/bus'
import { homeStatistics, queryAllByDay } from '@/api/financeMgr/trade'
import { queryPageList } from '@/api/home'
export default {
    name: "welcome",
    data(){
        return{
            cardsData: {},
            chart: null,
            // chartData: {},
            // 模拟数据
            chartData: {
                create_date: ['2021-01', '2021-02', '2021-03', '2021-04', '2021-05'], // X轴日期
                orderCount: 500, // 总笔数
                totalMoney: 100000, // 总金额
                allTotal: [120, 132, 101, 134, 90], // 总笔数数据
                allMoney: [220, 182, 191, 234, 290] // 总金额数据
            },
            chartRange: 7,
            timer: null,
            noticeData: [
                { title:'接口接口', time:'2024-02-02',new:true,content:'这是公告一'},
                { title:'公告二·', time:'2024-02-02',new:false,content:'这是公告二'}
            ],
            pagination: {
                current: 1,
                size: 10
            },
            cards: [
                {
                    key: 'allAmount',
                    text: '账户余额',
                    per: 'ALL',
                    icon: require('../assets/images/index/withdrawDeposit.png')
                },
                {
                    key: 'balance',
                    text: '可分润金额',
                    per: 'ALL',
                    icon: require('../assets/images/index/monthPlatformRevenue.png')
                },
                // {
                //   key: 'freezeAmount',
                //   text: '冻结金额',
                //   icon: require('../assets/images/index/freeze.png')
                // },
                {
                    key: 'orderAmount',
                    text: '今日交易总额',
                    per: 'ZZH,AGENT',
                    icon: require('../assets/images/index/transactionsTotal.png')
                },
                {
                    key: 'income',
                    text: '今日平台收入',
                    per: 'ZZH,AGENT',
                    icon: require('../assets/images/index/withdrawDeposit.png')
                }
            ],
        }
    },
    methods:{
        /**
         * 表格数据初始化
         */
        getAnnouncement () {
            queryPageList(this.pagination).then(({
                                                     data,
                                                     code
                                                 }) => {
                if (code === this.$constant.SUCCESS) {
                    const tableData = data.records
                    const week = this.$dayjs().subtract(7, 'day')
                    tableData.forEach(e => {
                        const date = dayjs(e.createTime)
                        e.new = date.isAfter(week)
                        e.time = date.format('YYYY-MM-DD')
                    })
                    this.noticeData = tableData
                    if (tableData && tableData[0] && tableData[0].new) {
                        this.showNotice(tableData[0])
                    }
                }
            })
        },
        downDoc (fileName) {
            window.open(fileName + '?t=' + new Date().getTime())
        },
        // 查看公告
        showNotice(item) {
            const h = this.$createElement;
            this.$info({
                title: '公告',
                content: h('div', {}, [
                    h('div', { class:'adTop' },[
                        h('div', { class: 'title' }, item.title),
                        h('div', { class: 'time' }, item.time),
                    ]),
                    h('div', { class: 'detail' }, item.content),
                ]),
                onOk() {},
                width: 600,
                customClass: 'notice-detail', // 自定义弹框样式
                okText: '确认'
            });
        },
        // 渲染chart
        initChart () {
            const _this = this
            if (this.chart) {
                this.chart.dispose()
            }
            this.chart = echarts.init(this.$refs.chart)
            const option = {
                color: ['#5470C6', '#91CC75'],
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross',
                        crossStyle: {
                            color: '#999'
                        }
                    }
                },
                legend: {
                    data: ['总笔数', '总金额'],
                    formatter: function (name) {
                        let title = ''
                        if (name === '总笔数') {
                            title = _this.chartData.orderCount ? name + ': ' + _this.chartData.orderCount : name
                        } else {
                            title = _this.chartData.totalMoney ? name + ': ' + _this.chartData.totalMoney : name
                        }
                        return title
                    },
                    right: 120,
                    top: 20
                },
                grid: {
                    top: '100px',
                    bottom: '30px',
                    left: '20px',
                    right: '20px',
                    containLabel: true
                },
                xAxis: [
                    {
                        type: 'category',
                        data: this.chartData.create_date
                    }
                ],
                yAxis: [
                    {
                        type: 'value',
                        name: '笔数',
                        axisLabel: {
                            formatter: '{value} 笔'
                        },
                        axisLine: {
                            show: false
                        }
                    },
                    {
                        type: 'value',
                        name: '金额',
                        axisLabel: {
                            formatter: '{value} 元'
                        },
                        axisLine: {
                            show: false
                        },
                        axisTick: {
                            show: false
                        }
                    }
                ],

                series: [
                    {
                        name: '总笔数',
                        type: 'bar',
                        barWidth: '30px',
                        tooltip: {
                            valueFormatter: function (value) {
                                return value + ' 笔'
                            }
                        },
                        data: this.chartData.allTotal
                    },
                    {
                        name: '总金额',
                        type: 'line',
                        yAxisIndex: 1,
                        tooltip: {
                            valueFormatter: function (value) {
                                return value + ' 元'
                            }
                        },
                        data: this.chartData.allMoney
                    }
                ]
            }
            this.chart.setOption(option)
        },
        // window窗口改变
        onResize () {
            const _this = this
            _this.$nextTick(() => {
                _this.$refs.chart.style = {
                    width: _this.$refs.chart.clientWidth + 'px',
                    height: _this.$refs.chart.clientHeight + 'px'
                }
                _this.initChart()
            })
        },
        // 获取echartsData
        getChartData () {
            const day = this.chartRange
            queryAllByDay(day).then(({
                                         data,
                                         code
                                     }) => {
                if (code === this.$constant.SUCCESS) {
                    this.chartData = data
                    this.initChart()
                }
            })
        },
        // 初始化数据
        initData () {
            if (this.userInfo.freezeAmount <= 0) {
                this.cards[0] = {
                    key: 'allAmount',
                    per: 'ALL',
                    text: '账户余额',
                    icon: require('../assets/images/index/withdrawDeposit.png')
                }
            } else {
                this.cards[0] = {
                    key: 'amountTotal',
                    per: 'ALL',
                    icon: require('../assets/images/index/withdrawDeposit.png'),
                    children: [
                        {
                            key: 'freezeAmount',
                            text: '冻结金额'
                        },
                        {
                            key: 'allAmount',
                            text: '账户余额'
                        }
                    ]
                }
            }
            if (this.userInfo.proportion && this.userInfo.proportion > 0) {
                this.cards[3] = {
                    key: 'income',
                    per: 'ZZH,AGENT',
                    icon: require('../assets/images/index/withdrawDeposit.png'),
                    children: [
                        {
                            key: 'userCanGet',
                            text: '今日平台收入'
                        },
                        {
                            key: 'userGetRiskMoney',
                            text: '今日风控金收入'
                        }
                    ]
                }
            } else {
                this.cards[3] = {
                    key: 'userCanGet',
                    text: '今日平台收入',
                    per: 'ZZH,AGENT',
                    icon: require('../assets/images/index/withdrawDeposit.png')
                }
            }

            homeStatistics().then(({
                                       code,
                                       data
                                   }) => {
                if (code === this.$constant.SUCCESS) {
                    this.cardsData = {
                        allAmount: this.$utils.add(this.userInfo.balance, this.userInfo.freezeAmount),
                        balance: this.userInfo.balance,
                        freezeAmount: this.userInfo.freezeAmount,
                        orderAmount: data.money,
                        userGetRiskMoney: data.userGetRiskMoney,
                        userCanGet: data.userCanGet
                        // income: (this.userInfo.proportion && this.userInfo.proportion > 0) ? data.userGetRiskMoney : data.userCanGet
                    }
                }
            })
            // 获取charts
            this.getChartData()
            this.getAnnouncement()
        },
        resizeDom () {
            const _this = this
            // 如果存在定时器，清除定时器
            if (_this.timer) {
                clearTimeout(_this.timer)
            }
            // 重绘Echarts
            _this.timer = setTimeout(() => {
                _this.onResize()
            }, 200)
        },


    },
    beforeDestroy () {
        if (this.chart) {
            this.chart.dispose()
            this.chart = null
        }
        // 如果存在定时器，清除定时器
        if (this.timer) {
            clearTimeout(this.timer)
        }
        window.removeEventListener('resize', this.resizeDom, false)
    },
    mounted () {
        const _this = this
        this.initChart()
        // this.$store.dispatch('user/getInfo')
        // _this.initData()
        // //
        // _this.$nextTick(() => {
        //     _this.onResize()
        // })
        window.addEventListener('resize', _this.resizeDom)

        bus.$on('collapse', (value) => {
            _this.resizeDom()
        })
        bus.$on('updateBalance', async (value) => {
            console.log('updateBalance')
            await this.$store.dispatch('user/getInfo')
            _this.initData()
        })
    }

}
</script>

<style scoped lang="scss">
//公告
.adTop{
    display: flex;
    align-items:center;
    justify-content: space-between;
    margin-bottom: 15px;
    .title{
        font-weight: 700;
        font-size: 18px;

    }
}
.welcome{
    .top{
        width: 100%;
        height: 100px;
        //background-color: #da9d9d;
        list-style: none;
        display: flex;
        padding: 0;
        .li{
            flex: 1;
            background-color:white;
            margin-right: 20px;
            border-radius: 10px;
            box-sizing: border-box;
            padding: 10px;
            display: flex;
            .le{
                flex: 2;
                //background-color: #42b983;
                display: flex;
                flex-direction: column;
                justify-content: center;
                .le_top{
                    //margin-bottom: 5px;
                    color: #908e99;
                }
                .le_bot{
                    display: flex;
                    align-items: baseline;

                    .le_t_l{
                        font-size: 30px;
                        font-weight: 700;
                    }
                    .le_t_r{
                        font-size: 15px;
                        margin-left: 10px;
                        color: #63c870;
                        font-weight: 700;

                    }
                }
            }
            .ri{
                flex: 1;
                //background-color: #67c23a;
                display: flex;
                justify-content: center;
                align-items: center;
                .bgc{
                    width: 50px;
                    height: 50px;
                    background-color: #1890ff;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    border-radius: 8px;
                }
            }

            &:nth-child(4){
                margin-right: 0;
            }
        }
    }
    .bottom{
        margin-top: 30px;
        display: flex;
        width: 100%;
        .le{
            flex: 3;
            min-width: 450px;
            height:calc(100vh - 250px);
            //background-color: #d32222;
            margin-right: 20px;
            .download{
                height: 200px;
                background-color: #FFFFFF;
                border-radius: 10px;
                box-sizing: border-box;
                padding: 20px;
                h3 {
                    margin: 5px 0 20px 0;
                }
                > div {
                    padding-left: 15px;
                    p {
                        line-height: 36px;
                        padding-left: 10px;
                        border-bottom: 1px #333333 dashed;
                        cursor: pointer;
                    }
                }
            }
            .notice {
                margin-top: 10px;
                min-height: 400px;
                background-color: #FFFFFF;
                border-radius: 10px;
                box-sizing: border-box;
                padding: 20px;
                h3 {
                    margin-bottom: 10px;
                }
                .badge {
                    position: relative;
                }
                .badge:after {
                    content: 'new';
                    position: absolute;
                    left: 0;
                    top: -8px;
                    width: 35px;
                    background-color: #f56c6c;
                    border-radius: 10px;
                    color: #fff;
                    display: inline-block;
                    font-size: 12px;
                    height: 18px;
                    line-height: 18px;
                    padding: 0 6px;
                    text-align: center;
                    white-space: nowrap;
                    border: 1px solid #fff;

                }
                > div {
                    height: calc(100% - 40px);
                    overflow: auto;
                    padding-right: 20px;
                    padding-top: 10px;
                    > div {
                        height: 36px;
                        width: 100%;
                        border-bottom: 1px #333333 dashed;
                        cursor: pointer;

                        .p{
                            float: left;
                            border: none;
                            height: 35px;
                            line-height: 35px;
                            text-indent: 7px;

                        }
                        .p:first-child {
                            width: calc(100% - 120px);
                            overflow: hidden;
                            -webkit-line-clamp: 1;
                            display: -webkit-box;
                            -webkit-box-orient: vertical;
                        }

                        .p + .p {
                            width: 100px;
                        }
                    }

                }
            }
        }
        .bot_chart{
            flex: 6;
            width: 500px;
            height:calc(100vh - 250px);
            //background-color: #b21717;
            border-radius: 10px;

        }
        .echarts{
            background-color: #FFFFFF;
            min-height: 610px;
            border-radius: 10px;

        }
    }
}
</style>
